<template>
	<view class="all" :style="{
			height: $height()+'px'
	}">
		<u-navbar :is-back="true" title="我的會員" title-bold :background="background" />
		<view class="top_1" :style="{
			'background-image': $img('https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164673005075082.png'),
			}">
			<view class="top_1_1">
				<image @click="$to('/pages/my/information')"
					src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-05/164646641285062.png"
					class="top_1_1_1" />
				<view class="top_1_1_2">
					<text>澳葡嚴選</text>
					<text @click="$to('/pagesA/memBership/memberDescription')">會員卡說明</text>
				</view>

			</view>
			<view class="top_1_2">
				<text>纍計積分</text>
				<text>27588</text>
			</view>
		</view>
		<view class="lunbo">
			<swiper previous-margin="50rpx" next-margin="50rpx" class="swiper" :indicator-dots="false" :current="1"
				:duration="500">
				<swiper-item v-for="(item,index) in 3">
					<view class="swiper_img" :style="{
					'background-image': $img('https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164673061640154.png')
				}">
						<view class="text">
							<view class="text_1">
								<text>會員等級</text>
								<text>纍計積分27588</text>
							</view>
							<view class="text_2">
								lv3
							</view>
							<view class="text_3">
								纍計積分達到30000成為Lv4
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="erwei">
			<view class="erwei_1">
				<image src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164673214525992.png" />
			</view>

			<text>邀請好友</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.all {
		background-color: #F4F4F4;
	}

	.lunbo {
		margin-top: -55rpx;
	}

	.erwei {
		padding-top: 80rpx;
		width: 600rpx;
		height: 684rpx;
		margin: 50rpx auto;
		background: #FFFFFF;
		border-radius: 10rpx;

		image {
			width: 346rpx;
			height: 346rpx;
		}

		.erwei_1 {
			width: 427rpx;
			height: 427rpx;
			background: #F6F6F6;
			border: 1rpx solid #F6F6F6;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;
		}

		text {
			margin: 50rpx auto;
			display: block;
			text-align: center;
			line-height: 80rpx;
			width: 300rpx;
			height: 80rpx;
			background: #00795E;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: Source Han Serif CN;
			font-weight: 600;
			color: #FFFFFF;
		}
	}

	.swiper {
		height: 270rpx;

		.swiper_img {
			margin-left: 15rpx;
			margin-right: 15rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			height: 270rpx;

			.text {
				padding: 30rpx;
				width: 80%;
				float: right;

				.text_3 {
					margin-top: 30rpx;
					font-size: 22rpx;
					font-family: Source Han Serif CN;
					font-weight: 400;
					color: #5D4026;
				}

				.text_2 {
					margin-top: 30rpx;
					font-size: 40rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #5D4026;
				}

				.text_1 {
					padding-top: 30rpx;
					display: flex;
					justify-content: space-between;

					text:nth-of-type(1) {
						font-size: 26rpx;
						font-family: Source Han Serif CN;
						font-weight: 500;
						color: #5D4026;
					}

					text:nth-of-type(2) {
						font-size: 24rpx;
						font-family: Source Han Serif CN;
						font-weight: 400;
						color: #5D4026;

					}
				}
			}
		}
	}

	.top_1 {
		padding-left: 35rpx;
		height: 316rpx;
		padding-right: 35rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.top_1_2 {
			text-align: center;

			text:nth-of-type(1) {
				font-size: 22rpx;
				font-family: Source Han Serif CN;
				font-weight: 400;
				color: rgba($color: #FFFFFF, $alpha:0.6);
				display: block;
			}

			text:nth-of-type(2) {
				font-size: 32rpx;
				font-family: Source Han Serif CN;
				font-weight: bold;
				color: #FFFFFF;
				display: block;
			}
		}

		.top_1_1_2 {
			margin-left: 15rpx;

			text:nth-of-type(1) {
				font-size: 36rpx;
				font-family: Source Han Serif CN;
				font-weight: bold;
				color: #FFFFFF;
			}

			text:nth-of-type(2) {
				height: 36rpx;
				margin-top: 20rpx;
				text-align: center;
				border-radius: 4rpx;
				display: block;
				background-color: rgba(50, 139, 108, 1);
				font-size: 20rpx;
				font-family: Source Han Serif CN;
				font-weight: 500;
				color: #FFFFFF;

			}
		}

		.top_1_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
			}

		}

	}
</style>
